<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/vue3/vue.global.js"></script>
    <script>
        // 第一步:下载插件 - npm install vue
        //                - 支持两种使用场景【node模块化场景、浏览器使用】
        //                - 浏览器使用 => npm下载的模块如果提供浏览器使用场景，浏览器加载的文件一般被存储于 dist|build 目录中
        // 第二步:选择文件 - .ts 文件 => 语法描述文件，用于为typeScript语法提供描述支持
        //                - .cjs. 文件 => common js module 文件【node环境加载的模块文件】
        //                - .esm-brower. => 浏览器 ES6 module 语法规范文件
        //                - .global. => 浏览器常规JS语法插件文件
        //                - .runtime. => vue提供的删除了部分功能的特殊运行插件
        //                + .prod. => 表示压缩版插件【生产版本-无法加载调试工具】(无.prod后缀的是开发版本)
        //                + .bundler => node环境进行文件合并时使用的版本
        // 第三步:加载使用 <script src> 方式完成加载,文件加载完成后会提供全局变量 Vue
        //                 Vue 对象变量中包含vue的所有功能方法【 vue自由的内部方法；开发者调用方法 】

        window.onload = function(){
            console.log( "Vue:",Vue )
            // 第四步:构建Vue的语法支持程序，采用Vue.createApp(options) 方法完成 【创建出一个可以支持和运行vue功能的代码环境】
            //        参数: options => createApp 方法采用的是 options Api 语法规范【选项式语法】
            //              + 以参数对象的配置属性取值方式控制代码的执行逻辑
            //              + 部分属性配置未传入数据时将使用默认值
            // 
            //        方法返回的app对象为构建后的应用对象
            let options = {
                // data 为vue的容器的vue语法提供变量支持，所以被叫做 数据仓库
                //      取值是一个固定写法的方法 function(){ return { 定义变量 }  } ==> 工厂函数(后续课程讲解)
                data:function(){
                    return {
                        msg:"msg数据"
                    }
                },
                // methods 为vue的容器的vue语法提供方法支持，所以被叫做 方法仓库
                //         取值为一个空对象，通过扩充对象属性定义方法，所以属性取值为Function类型
                //          methods 中定义的普通函数 通过 this.变量名 可以直接使用 数据仓库变量
                methods:{
                    showTip:function(){
                        alert( this.msg )
                    }
                }
            }
            const app = Vue.createApp(options);
            console.log("app:",app)
            // 第五步:将vue环境的应用程序和页面的某个元素容器构建出关联关系，使用app.mount(el) 方法
            //        el element select 元素css选择器
            app.mount("#app");
        }
    </script>
</head>
<body>
    <div id="app">
        <!-- 
            vue的语法组成
                1、模板语法：在被vue挂载的容器中使用的vue语法需要由vue应用提供对应的支持;
                             模板语法的对应功能有 vue的构成语法提供
                2、vue构成语法：createApp 创建时需要传入的相关参数
         -->
        <!-- 模板插值表达式：用于取值展示 -->
        <p>模板插值表达式: {{ msg }} </p>
        <!-- 
            模板指令语法：指令是一种被定义的特殊的dom操作方法 
            v-model：自动绑定value默认值；自动绑定input事件完成赋值
            v-on：自动完成DOM事件绑定
        -->
        <input type="text" v-model="msg">
        <input type="button" value="tip" v-on:click="showTip()">
    </div>
</body>
</html>